<!-- 下拉菜单 -->
<template>
    <view class="dropdown-menu">
		<view class="menu_box" ref="menu">
			<view class="item_menu" v-for="(item, index) in menuList" :key="index">
				<view class="menu_head" @click="selectMenu(index,item)">
					<text :class="{'red' : active === index}">{{ item.name }}</text>
					<image :src="active === index && !item.show_option ? activeDown : active === index && item.show_option ? activeUp : down"  ></image>
				</view>
			</view>
			<view class="option" v-if="menuList[active].show_option">
				<view class="cell" v-for="(items, i) in menuList[active].selectList" :key="i" @click="selectOption(i,items)">
					<view class="name" :class="{'red' : menuList[active].active === i}">
						{{ items }}
					</view>
					<view class="icon" v-if="menuList[active].active === i">
						<image src="/static/img/selected_icon.png"  ></image>
					</view>
				</view>
			</view>
		</view>
		<view class="menu_mask" v-if="menuList[active].show_option" @click.stop="menuList[active].show_option = false" :style="{top: top + 'rpx'}">
		</view>
	</view>
</template>
<script>
export default {
	props: {
		top: {
			type: Number,
			default: 0
		},
		// menuList: {
		// 	type: Array,
		// 	default: []
		// }
	},
	
    components: {},
    data() {
        return {
			active: 0,
			show_option: false,
			down: '/static/img/3.png',
			activeUp: '/static/img/active_up.png',
			activeDown: '/static/img/active_up.png',
			menuList: [
				{
					name: '默认',
					show_option: false,
					active: 0,
					selectList: ['默认','商品','商家','电影票']
				},
				{
					name: '好评数',
					show_option: false,
					active: 0,
					selectList: ['好评数','好评','差评']
				},
				{
					name: '兑换量',
					show_option: false,
					active: 0,
					selectList: ['兑换量','最多','最少']
				},
				{
					name: '距离远近',
					show_option: false,
					active: 0,
					selectList: ['距离远近','最远','最近']
				}
			],
		};
    },
	watch: {
		active(newActive, oldActive) {
			if(newActive != oldActive){
				this.menuList[oldActive].show_option = false
			}
		}
	},
    computed: {
	},
    methods: {
		selectMenu(index,item) {
			this.active = index
			item.show_option = !item.show_option
			// console.log("active",this.active)
			// console.log(item.show_option,'1')
		},
		selectOption(index,name) {
			var obj = this.menuList[this.active]
			obj.name = name
			obj.active = index
			obj.show_option = false
			this.$emit('selectOption',this.active, index)
			// console.log("active",this.active)
			// console.log("index",index)
			// console.log(this.active,index)
		},
		close() {
			this.menuList[this.active].show_option = false
		}
	},
    beforeCreate() {},
    created() {
	},
    beforeMount() {},
    mounted() {
	},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>
<style scoped lang='scss'>
	.dropdown-menu{
		background-color: #FFFFFF;
/* 		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1; */
		.red{
			color: $uni-default-color !important;
			font-weight: 550;
		}
		.menu_box{
			display: flex;
			position: relative;
			z-index: 1;
			background-color: #FFFFFF;
			.item_menu{
				flex: 1;
				display: flex;
				justify-content: center;
				
				.menu_head {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					height: 112rpx;
					text{
						font-size: 28rpx;
						line-height: 1em;
						color: #999999;
					}
					image{
						height: 32rpx;
						width: 32rpx;
					}
				}
			}
			.option {
				background-color: #FFFFFF;
				position: absolute;
				top: 112rpx;
				left: 0;
				right: 0;
				padding: 0 32rpx;
				.cell{
					height: 88rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.name{
						font-size: 28rpx;
						line-height: 1em;
						color: #333333;
					}
					.icon{
						display: flex;
						align-items: center;
						image{
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}
		.menu_mask{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
			background-color: rgba($color: #000000, $alpha: 0.3);
		}
	}
</style>
